<template>
	<view class="page" :style="pageStyle">
		<view v-if="showAd" style="width: 250px; height: 250px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999;">
			<u-icon @click="closeAd" name="close" style="position: absolute; top:4%;right: 4%; z-index: 99999;"></u-icon>
			<u-image :src="imgSrc" width="250px" height="250px" showMenuByLongpress="true" @click="previewImg"></u-image>
		</view>
		<!-- 广告 -->
		<!-- <card @closeAd="closeAd()" v-if="showShadow"></card> -->
		<view style="padding-left: 20rpx;">
			<view class="top">
				<view class="left">
					<view class="title">学期:</view>
					<view class="content">
						<picker class="itemPicker" @change="termChange" :value="termIndex" :range="termArray">
							<view class="uni-input">{{termArray[termIndex]}}</view>
						</picker>
						<view class="iconfont icon-xuanzeqixiayige" style="color: #c0c4cc;margin-left: 5rpx;"></view>
					</view>
					<view class="title" @click="tempTip()">   查看绩点&学习成绩</view>
				</view>
				<!-- <view class="right"> -->
<!-- 				<button class="right" @click="toCredit()">
					查看绩点&学习成绩
				</button> -->
				<!-- 					<br/>
					<text>
						(含详细计算过程)
					</text> -->
				<!-- </view> -->
			</view>
			<view v-if="haveData" class="card" v-for="(item,index) in list" :key="index">
				<view class="content">
					<view class="title">{{item.subject}}</view>
					<view class="row">
						<view class="li">
							<text style="font-weight: 700;">绩点：</text>
							<text>{{item.gpa}}</text>
						</view>
						<view class="li">
							<text style="font-weight: 700;">学分：</text>
							<text>{{item.score}}</text>
						</view>
					</view>
					<view class="row">
						<view class="li">
							<text style="font-weight: 700;">平时：</text>
							<text v-if="item.norBili">
								<text>{{item.norGrade}}</text>
								<text>({{item.norBili}})</text>
							</text>
							<text v-else>
								<text>无</text>
							</text>
						</view>
						<view class="li">
							<text style="font-weight: 700;">末考：</text>
							<text v-if="item.qimoBili">
								<text>{{item.qimoGrade}}</text>
								<text v-if="item.qimoBili">({{item.qimoBili}})</text>
							</text>
							<text v-else>
								<text>无</text>
							</text>
						</view>
					</view>
				</view>
				<view class="time" :style="'background-color:' + color[index%7]">
					<view class="number">{{item.grade}}</view>
					<view class="text" v-if="Number(item.grade) > 0">分</view>
				</view>
				<view class="type">
					{{item.property}}
				</view>
				<view class="shadow"></view>
			</view>
			<view v-if="!haveData" class="noDataTip">
				<view class="iconfont icon-wuanpai" style="color:#6B6B6B;margin-right: 25rpx;font-size: 45rpx;"></view>
				<view style="font-size: 45rpx;">暂无考试成绩!</view>
			</view>
		</view>
	</view>
</template>

<script>
	let interstitialAd = null;
	import card from "../../components/card/card.vue"
	export default {
		onLoad() {
			// if (Math.floor((Math.random()*100)+1)%3 === 0) {
			//                 this.showAd = false
			//         }
			uni.getStorage({
				key: 'imgSrc',
				success: (res) => {
					console.log(1)
					const arr = JSON.parse(res.data);
					this.imgSrcArr = arr
					this.imgSrc = this.imgSrcArr[0]
					const img = this.imgSrcArr.shift()
					this.imgSrcArr.push(img)
					uni.setStorage({
						key: 'imgSrc',
						data: JSON.stringify(this.imgSrcArr),
						success: function () {
							console.log('success');
						}
					});
				},
				fail: () => {
					console.log(3)
					this.imgSrc = this.imgSrcArr[0]
					const img = this.imgSrcArr.shift()
					this.imgSrcArr.push(img)
					uni.setStorage({
						key: 'imgSrc',
						data: JSON.stringify(this.imgSrcArr),
						success: function () {
							console.log('success');
						}
					});
				}
			});
			
		},
		onHide() {
			// console.log("onHide监听页面隐藏")
			if (interstitialAd) {
				interstitialAd = null;
			}
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let pxToRpxScale = 750 / res.windowWidth;
					that.height = res.windowHeight * pxToRpxScale;
				}
			});
			// let num = Math.round(Math.random()); //获取随机数为 0 / 1
			// console.log(num)
			// if (num) {
			// 	// this.showShadow = true;


			// } else {
			// 	// this.showShadow = false;
			// }
			setTimeout(() => {
				// that.interstitialShow(0)
			}, 300)
			this.header = new Object()
			this.header.Authority = uni.getStorageSync("Authority");
			this.term = this.termArray.length - this.termIndex;
			this.getData()
		},
		data() {
			return {
				height: 0,
				value: 0,
				showAd:true,
				imgSrc: '',
				imgSrcArr: ['http://1.14.247.152:9797/images/饿了么.jpg', 'http://1.14.247.152:9797/images/美团.jpg'],
				header: null,
				termArray: ['所有学期', '2021-2022-1', '2021-2022-2', "2020-2021-1", "2020-2021-2", "2019-2020-1",
					"2019-2020-2",
					"2018-2019-1", "2018-2019-2", "2017-2018-1", "2017-2018-2"
				],
				termIndex: 1,
				haveData: false, //有无数据
				color: ["#f25753", "#AB82FF", "#8DB6CD", "#EE9A00", "#B3B3B3", "#FF83FA", "#5F9EA0"],
				list: [],
				term: 0, //学期参数
				screenHeight: 0, //屏幕高度
				showShadow: false //展示遮罩层
			}
		},
		computed: {
			pageStyle() {
				if (this.showShadow) {
					return 'overflow: hidden; height:' + this.height + 'rpx';
				} else {
					// console.log('改变')
					return ' height:' + this.height + 'rpx';
				}
			}
		},
		methods: {
			tempTip(){
				uni.showToast({
					title:"敬请期待"
				})
			},
			interstitialShow(times) { //显示插屏广告
				var that = this;
				setTimeout(() => {
					if (interstitialAd) {
						// console.log('插屏广告正在显示....');
						interstitialAd.show().catch((err) => {
							// console.error("插屏广告显示失败：", err);
							switch (err.errCode) {
								case 2001:
									//打开小程序一定时间内不允许展示
									that.interstitialShow(1000);
									break;
								case 2002:
									//距离小程序插屏广告或者激励视频广告上次播放时间间隔不足，不允许展示插屏广告
									that.interstitialShow(1000);
									break;
								default:
									break;
							}
						})
					}
				}, times)
			},
			async getData() {
				uni.showLoading({
					title: '加载中..',
					mask: true
				});
				// console.log(this.header)
				let res = await getApp().UniRequest("/grade/authority/getGrade?term=" + this.term, "Get", "", this
					.header);
				if (res.code === 20001) {

				} else {
					this.list = res;
					this.haveData = true;
					// console.log(res)
					uni.hideLoading()
				}
				// this.list = res;
				// console.log(res)
				// if (this.list.length != 0) {
				// 	this.haveData = true 
				// } else {
				// 	this.haveData = false
				// }


			},
			termChange(e) {
				// console.log(e.detail.value);
				this.termIndex = e.detail.value;
				if (e.detail.value === "0") {
					this.term = 0;
				} else {
					this.term = this.termArray.length - this.termIndex;
				}
				// console.log(this.term)
				this.getData();
			},
			toCredit() {
				uni.navigateTo({
					url: '../credit/credit'
				})
			},

			closeAd() {
				this.showAd=false;
			},
			
			previewImg() {
			                let _this = this;
			                let imgsArray = [];
			                imgsArray[0] = this.imgSrc
			                uni.previewImage({
			                    current: 0,
			                    urls: imgsArray
			                });
			},
			
			previewImage() {
				let that = this;
				let base;
				// 将图片转换为base64
				// wx.getFileSystemManager().readFile({
				// 	filePath: "static/images/ad.png", //选择图片返回的相对路径
				// 	encoding: 'base64', //编码格式
				// 	success: res => { //成功的回调
				// console.log(res.data);
				// 		base = res.data;
				// 	},
				// 	fail(error) {
				// 		console.log('失败', error)
				// 	}
				// })
				// wx.previewImage({ //预览图片，长按可以识别
				//   urls: ['http://1.14.247.152:9797/images/14016广告.png'] // 需要预览的图片http链接列表
				// })
			}
		},
		components: {
			card
		}

	}
</script>

<style lang="less" scoped>
	.page {
		background-color: #f8f8f8;
		position: relative;

		button {
			background-color: #fff;
			border: 0rpx;
			padding-right: 10rpx;
			padding-left: 10rpx;
			margin-left: 0;
			margin-right: 0;
		}

		/deep/ .u-image {
			
			// border-radius: 35px !important;
			
			.u-image__image {
				border-radius: 25px !important;
			}
		}

		.noDataTip {
			height: 150rpx;
			width: 650rpx;
			line-height: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 50%;
			margin-top: -150rpx;
			left: 50%;
			margin-left: -325rpx;
			font-size: 50rpx;
			color: #6B6B6B;
			// background-color: #fff;
			// box-shadow: 0.5rpx 0.5rpx 40rpx #DBDBDB;
			border-radius: 20rpx;
		}


		.top {
			// background-color: pink;
			display: flex;
			justify-content: space-between;
			font-size: 32rpx;
			letter-spacing: 2rpx;
			margin-bottom: 26rpx;
			padding: 20rpx;

			.left {
				// width: 50%;
				display: flex;
				align-items: center;

				.title {
					font-weight: 700;
					margin-right: 20rpx;
				}

				.content {
					display: flex;

					.itemPicker {
						font-weight: 500;
						// border-bottom: 1rpx solid #000000;
					}
				}
			}

			.right {
				padding-right: 10rpx;
				width: 42%;
				letter-spacing: 4rpx;
				font-size: 26rpx;
				font-weight: 700;
				background-color: #FFFFFF; 
				color: #23B8FF;
				button {}
			}
		}

		.card {
			width: 94%;
			height: 230rpx;
			display: flex;
			// margin: 20rpx;
			margin-bottom: 25rpx;
			position: relative;
			background-color: #FFFFFF;
			box-shadow: 1rpx 1rpx 10rpx #D9D9D9;
			border-radius: 25rpx;

			.content {
				flex: 3;
				height: 100%;
				display: flex;
				flex-flow: column;
				justify-content: center;
				// text-align: center;
				padding: 10rpx;
				padding-bottom: 15rpx;

				.title {
					margin-top: 10rpx;
					width: 100%;
					padding-left: 20rpx;
					font-size: 1.2em;
					font-weight: 600;
					// text-align: center;

				}

				.row {
					display: flex;
				}

				.li {
					// display: flex;
					width: 100%;
					padding-left: 20rpx;
					// margin-left: 20rpx;
					margin-top: 20rpx;
					color: #6E6E6E;
					font-size: 3.5vmin;
					// font-weight: 500;

				}

				&>.li:nth-child(1),
				&>.li:nth-child(2) {
					width: 50%;
				}
			}

			.time {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				// height: 230rpx;
				padding: 10rpx;
				color: #FFFFFF;
				text-align: center;
				background-color: #f25753;
				// border-top-right-radius: 25rpx;
				// border-bottom-right-radius: 25rpx;

				.number {
					flex: 4;
					font-size: 3.3em;
					// line-height: 230rpx;
				}

				.text {
					flex: 1;
					font-size: 30rpx;
					// line-height: 260rpx;
				}
			}

			.type {
				position: absolute;
				right: -26rpx;
				top: 10rpx;
				background-color: #fff;
				width: 80rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				font-size: 0.8em;
				letter-spacing: 2rpx;
			}

			.shadow {
				// z-index: ;
				position: absolute;
				right: -23rpx;
				top: 50rpx;
				// left: 20rpx;
				border: 12rpx solid #CDCDC1;
				border-right: 12rpx solid transparent;
				border-bottom: 12rpx solid transparent;
				width: 0;
				height: 0;
			}
		}

		.tip {
			display: flex;
			// width:500rpx;
			height: 200rpx;
			font-size: 40rpx;
			justify-content: center;
			align-items: center;
			// margin: 0 auto;
			// text-align: center;
			margin-top: 400rpx;
			// position: absolute;
			// left: 50%;
			// margin-left: -250rpx;
		}


	}
</style>
